<template>
  <div class="drawer-layoutsx">
    <el-drawer
      ref="allocation"
      :visible.sync="drawer"
      size="85%"
      :with-header="false"
      :wrapperClosable="false"
    >
      <div style="position: relative">
        <div class="drawerTitle">
          <span>基本工资配置</span>
          <div class="close" @click="closedinvitation">
            <i class="el-icon-close" style="font-size: 24px" />
          </div>
        </div>
      </div>
      <div style="padding:20px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本工资配置" name="first">
            <div style="padding: 10px 20px" v-loading="loading">
        <el-form
          ref="allocationform"
          :model="formData"
          :rules="formRules"
          inline
        >
          <el-table
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
            }"
            ref="drawertable"
            border
            :data="formData.check"
            style="width: 100%; height: 100%"
          >
            <el-table-column label="岗位级别" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="月新增成员数" align="center" width="110">
              <template slot-scope="scope">
                <el-col style="margin-top: 10px">
                  <el-form-item
                    :prop="`check.${scope.$index}.user_total_num`"
                    :rules="formRules.newFieldName"
                  >
                    <el-input-number
                      size="mini"
                      style="width: 100px"
                      controls-position="right"
                      v-model.number="scope.row.user_total_num"
                      :min="0"
                      :max="100000"
                      label=""
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </template>
            </el-table-column>

            <el-table-column label="月成交订单数" align="center" width="130">
              <template slot-scope="scope">
                <el-col style="margin-top: 10px">
                  <el-form-item
                    :prop="`check.${scope.$index}.order_pay_num`"
                    :rules="formRules.newFieldName"
                  >
                    <el-input-number
                      size="mini"
                      style="width: 110px"
                      controls-position="right"
                      v-model.number="scope.row.order_pay_num"
                      :min="0"
                      :max="100000"
                      label=""
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </template>
            </el-table-column>

            <el-table-column label="月退单数" align="center" width="130">
              <template slot-scope="scope">
                <el-col style="margin-top: 10px">
                  <el-form-item
                    :prop="`check.${scope.$index}.order_refund_num`"
                    :rules="formRules.newFieldName"
                  >
                    <el-input-number
                      size="mini"
                      style="width: 110px"
                      controls-position="right"
                      v-model.number="scope.row.order_refund_num"
                      :min="0"
                      :max="100000"
                      label=""
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </template>
            </el-table-column>

            <el-table-column label="月销售成交额" align="center" width="130">
              <template slot-scope="scope">
                <el-col style="margin-top: 10px">
                  <el-form-item
                    :prop="`check.${scope.$index}.order_pay_money`"
                    :rules="formRules.moneynumber"
                  >
                    <el-input-number
                      size="mini"
                      style="width: 110px"
                      controls-position="right"
                      v-model.number="scope.row.order_pay_money"
                      :min="0"
                      :max="100000"
                      label=""
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </template>
            </el-table-column>

            <el-table-column label="月实际成交额" align="center" width="130">
              <template slot-scope="scope">
                <el-col style="margin-top: 10px">
                  <el-form-item
                    :prop="`check.${scope.$index}.order_actual_money`"
                    :rules="formRules.moneynumber"
                  >
                    <el-input-number
                      size="mini"
                      style="width: 110px"
                      controls-position="right"
                      v-model.number="scope.row.order_actual_money"
                      :min="0"
                      :max="100000"
                      label=""
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </template>
            </el-table-column>

            <el-table-column label="直推人数" align="center" width="130">
              <template slot-scope="scope">
                <el-col style="margin-top: 10px">
                  <el-form-item
                    :prop="`check.${scope.$index}.user_total_num1`"
                    :rules="formRules.newFieldName"
                  >
                    <el-input-number
                      size="mini"
                      style="width: 110px"
                      controls-position="right"
                      v-model.number="scope.row.user_total_num1"
                      :min="0"
                      :max="100000"
                      label=""
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </template>
            </el-table-column>

            <el-table-column label="间推人数" align="center" width="130">
              <template slot-scope="scope">
                <el-col style="margin-top: 10px">
                  <el-form-item
                    :prop="`check.${scope.$index}.user_total_num2`"
                    :rules="formRules.newFieldName"
                  >
                    <el-input-number
                      size="mini"
                      style="width: 100px"
                      controls-position="right"
                      v-model.number="scope.row.user_total_num2"
                      :min="0"
                      :max="100000"
                      label=""
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </template>
            </el-table-column>

            <el-table-column label="现金奖励" align="center" width="120">
              <template slot-scope="scope">
                <el-col style="margin-top: 10px">
                  <el-form-item
                    :prop="`check.${scope.$index}.award_balance`"
                    :rules="formRules.moneynumber"
                  >
                    <el-input-number
                      :min="0"
                      :max="100000"
                      style="width: 100px"
                      size="mini"
                      controls-position="right"
                      v-model="scope.row.award_balance"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </template>
            </el-table-column>
            <el-table-column label="奖励积分" align="center" width="120">
              <template slot-scope="scope">
                <el-col style="margin-top: 10px">
                  <el-form-item
                    :prop="`check.${scope.$index}.award_integral`"
                    :rules="formRules.moneynumber"
                  >
                    <el-input-number
                      :min="0"
                      :max="100000"
                      style="width: 100px"
                      size="mini"
                      controls-position="right"
                      v-model="scope.row.award_integral"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </template>
            </el-table-column>

            <el-table-column label="奖励提货券" align="center" width="120">
              <template slot-scope="scope">
                <el-col style="margin-top: 10px">
                  <el-form-item
                    :prop="`check.${scope.$index}.award_voucher`"
                    :rules="formRules.moneynumber"
                  >
                    <el-input-number
                      :min="0"
                      :max="100000"
                      style="width: 100px"
                      size="mini"
                      controls-position="right"
                      v-model="scope.row.award_voucher"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
              </template>
            </el-table-column>

            <el-table-column label="奖励转化卡" align="center" width="190">
              <template slot-scope="scope">
                <el-col style="margin-top: 10px">
                  <el-form-item
                    :prop="`check.${scope.$index}.award_point_card_num`"
                    :rules="getValidationRules(scope.row.award_point_card_type)"
                  >
                    <el-input
                      style="width: 170px"
                      :min="0"
                      :max="100000"
                      size="mini"
                      controls-position="right"
                      v-model="scope.row.award_point_card_num"
                    >
                      <el-select
                        style="width: 100px"
                        v-model="scope.row.award_point_card_type"
                        slot="append"
                        placeholder="请选择"
                      >
                        <el-option label="数字" :value="1"></el-option>
                        <el-option label="百分比%" :value="2"></el-option>
                      </el-select>
                    </el-input>
                  </el-form-item>
                </el-col>
              </template>
            </el-table-column>

          </el-table>
        </el-form>

        <el-row style="margin: 50px 0; text-align: center">
          <el-col :span="24">
            <el-button size="medium" type="primary" @click="submitForms()"
              >确认</el-button
            >
            <el-button size="medium" @click="resetform()">重置</el-button>
          </el-col>
        </el-row>
      </div>
        </el-tab-pane>
        <el-tab-pane label="基本工资发放记录" name="second">
            <div style="background-color: #fff">
            <div class="container-module" style="padding-bottom: 0">
            <el-form :inline="true" class="search-form" size="small" ref="searchForm" :model="searchForm">
                <el-row style="display: flex">
                <div style="flex: 1">
                    <el-form-item class="search-form-item" label="运营 ID">
                    <el-input style="width: 100%" v-model="searchForm.params.market_role_id" placeholder="请输入运营id">
                    </el-input>
                    </el-form-item>
                    <el-form-item class="search-form-item" label="用户名称">
                    <el-input style="width: 100%" v-model="searchForm.params.name" placeholder="请输入用户名称"> </el-input>
                    </el-form-item>            
                    <el-form-item class="search-form-item" label="手机号">
                    <el-input style="width: 100%" v-model="searchForm.params.mobile" placeholder="请输入手机号"> </el-input>
                    </el-form-item>
                </div>
                <div style="padding: 5px 0">
                    <el-form-item>
                    <el-button size="small" type="primary" icon="el-icon-search" @click="getList">查询</el-button>
                    <el-button size="small" type="primary" icon="el-icon-refresh" @click="resetting">重置</el-button>
                    <el-button v-if="!searchDisplay" size="small" icon="el-icon-caret-bottom"
                        @click="searchDisplay = true">展开</el-button>
                    <el-button v-else size="small" icon="el-icon-caret-top" @click="searchDisplay = false">收起</el-button>
                    </el-form-item>
                </div>
                </el-row>
                <el-form-item v-if="searchDisplay" class="search-form-item" label="用户ID">
                <el-input style="width: 100%" v-model="searchForm.params.user_id" placeholder="请输入用户ID"> </el-input>
                </el-form-item>
                <el-form-item v-if="searchDisplay" class="search-form-item" label="建团时间">
                <el-date-picker @change="domeTimeWay" style="width: 100%" value-format="yyyy-MM-dd" v-model="establishTime"
                    type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
                </el-form-item>
                <el-form-item v-if="searchDisplay" class="search-form-item" label="运营经理团队数据查询">
                    <el-date-picker @change="operchangetime" style="width: 100%" value-format="yyyy-MM-dd" v-model="operatingtime"
                        type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            </div>
            <el-divider></el-divider>
            <div style="padding: 0 20px">
            <el-row :gutter="20">
                <el-col class="new_table_card">
                <el-table highlight-current-row :data="managerList" :header-cell-style="{
                    'background-color': '#f3f8fe',
                    color: '#606266',
                    height: '50px',
                    }" style="width: 100%" v-loading="loading">
                </el-table>
            </el-col>
            </el-row>
            <el-row style="text-align: right">
                <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.count"
                @pagination="getList" />
            </el-row>
            </div>
        </div>
        </el-tab-pane>
    </el-tabs>
      </div>

     


      
    </el-drawer>
  </div>
</template> 

<script>
import {
  roleRulelist,
  roleRuleedit,
  roleAwardlist,
  roleAwardedit,
} from "@/api/manager/index";
export default {
  name: "allocation",
  props: ["detailTitle", "allocation_type"],
  components: {},
  data() {
    return {
      //表单校验
      formRules: {
        moneynumber: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?$/;
              if (req.test(value)) {
                if (Number(value) > 99999999) {
                  return callback(new Error("金额不能大于99999999"));
                }
                callback();
              } else {
                callback(new Error("保留两位小数"));
              }
            },
            trigger: "change",
          },
        ],
        newFieldName: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+$/;
              if (req.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正整数"));
              }
            },
            trigger: "change",
          },
        ],
      },
      searchForm: {
            params: {
              market_role_id: "", // 运营id
              name: '',
              mobile: '',
              create_time_start: '',
              create_time_end: '',
              market_time_start:'',
              market_time_end:'',
              user_id: ''
            },
            page: 1,
            count: 10,
          },
      activeName: "first",
      managerList: [], //列表数据
      searchDisplay: false,
      drawer: false,
      loading: false,
      //table数据
      formData: {
        check: [],
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleClick(){},
    //父组件传值
    open(){
        this.drawer = true;
        this.gitrolereward()
    },
    //转换卡类型校验
    getValidationRules(cardType) {
      if (cardType === 1) {
        return [
          {
            required: false,
            validator: (rule, value, callback) => {
              if (value !== "" && !/^\d+$/.test(value)) {
                callback(new Error("请输入正整数"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ];
      } else if (cardType === 2) {
        return [
          {
            required: false,
            validator: (rule, value, callback) => {
              if (value !== "" && !/^\d+(\.\d{1,2})?$/.test(value)) {
                callback(new Error("最多两位小数"));
              } else if (Number(value) > 100) {
                callback(new Error("百分比不能超过100"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ];
      } else {
        return [];
      }
    },
  
    //获取奖励配置
    gitrolereward() {
      this.loading = true;
      roleAwardlist().then((res) => {
        if (res.code == 200) {
          this.loading = false;
          let arr = res.data;
          this.formData.check = JSON.parse(JSON.stringify(arr));
          this.formData.check.forEach((item) => {
            if (item.award_point_card_type === "") {
              item.award_point_card_type = 1;
            }
          });
        } else {
          this.$messages.error(res.msg);
          return;
        }
      });
    },
    // 提交
    submitForms() {
      this.$refs.allocationform.validate((valid) => {
        if (valid) {
          if (this.allocation_type == 1) {
            //保存考核指标
            roleRuleedit({ rule: this.formData.check })
              .then((res) => {
                if (res.code !== 200 || res.status !== 1) {
                  return this.$messages.error(res.msg);
                }
                this.$messages.success(res.msg);
                this.$parent.closeallocation();
              })
              .catch((error) => {
                this.$message.error(res.msg);
              });
          } else {
            //保存奖励条件
            roleAwardedit({ rule: this.formData.check })
              .then((res) => {
                if (res.code !== 200 || res.status !== 1) {
                  return this.$messages.error(res.msg);
                }
                this.$messages.success(res.msg);
                this.$parent.closeallocation();
              })
              .catch((error) => {
                this.$message.error(res.msg);
              });
          }
        } else {
          return false;
        }
      });
    },
    //重置按钮
    resetform() {
        this.gitrolereward();
    },
    //关闭抽屉
    closedinvitation() {
        this.drawer = false;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
